// 底部自动轮播组件
import React, { useEffect, useRef } from 'react';
import './Automatic.css'; 


const photos = [
  'https://s.ibaotu.com/img/activity/logo2.png',
  'https://s.ibaotu.com/img/activity/logo3.png',
  'https://s.ibaotu.com/img/activity/logo4.png',
  'https://s.ibaotu.com/img/activity/logo5.png',
  'https://s.ibaotu.com/img/activity/logo6.png',
  'https://s.ibaotu.com/img/activity/logo7.png',
  'https://s.ibaotu.com/img/activity/logo8.png',
  'https://s.ibaotu.com/img/activity/logo9.png',
  'https://s.ibaotu.com/img/activity/logo10.png',
];


const Automatic: React.FC = () => {
  // 获取轮播组件的引用 HTMLDivElement 指定了这个引用将指向一个 div 元素 确保 TypeScript 可以进行类型检查 通过这个引用 可以直接访问与 carouselRef 关联的 DOM 元素
  const carouselRef = useRef<HTMLDivElement>(null);

  // 使用useEffect来设置自动滚动逻辑
  useEffect(() => {
    const carousel = carouselRef.current;
    // 如果carousel未定义，则提前返回
    if (!carousel) return;

    let scrollAmount = 0; // 初始化滚动量
    const scrollSpeed = 1; // 设置滚动速度，值越小滚动越慢
    // 设置定时器，每隔一段时间执行一次滚动操作
    const scrollInterval = setInterval(() => {
      // 当滚动到末尾时，重置滚动位置和滚动量
      if (carousel.scrollLeft >= carousel.scrollWidth - carousel.clientWidth) {
        carousel.scrollLeft = 0;
        scrollAmount = 0;
      } else {
        // 增加滚动量，更新滚动位置
        scrollAmount += scrollSpeed;
        carousel.scrollLeft += scrollSpeed;
      }
    }, 20); // 调整时间间隔以控制滚动速度

    // 组件卸载时清除定时器
    return () => clearInterval(scrollInterval);
  }, []); // 空依赖数组表示只在组件挂载和卸载时执行

  // 渲染轮播组件
  return (
    <div className="carousel-container">
      <div className="carousel" ref={carouselRef}>
        {photos.map((src, index) => (
          <img key={index} src={src} alt={`Slide ${index}`} />
        ))}
      </div>
    </div>
  );
};

export default Automatic; 